<template>
    <div class="goods">
        <h3>商品：{{ title}}</h3>
        <p>价格：{{ price }}元一个</p>
        <p>描述：{{ desc}}</p>
        <button @click="cutPrice(pid)">砍一刀- {{ pid }}</button>
    </div>
</template>

<script>
export default {
    name:'MyProduct',
    // key不能当做props属性，传给子组件

    // props使用的时候，和我们的data数据一样类似, 在方法中取值，也是this.xxx
    // props 数据是父组件传给我们子组件的，

    // 单向数据流： 数据从父组件到子组件的单向流动 父 => 子 
    // 如果我们子组件修改了这个props中的变量值，相当于是子组件修改了父组件中的数据， 子 => 父 ； 控制台Error

    // 单向数据流原则：子组件不能修改或者说设置父组件传递过来的porps值！
    props:['price','title','desc','pid'],
    methods:{
        cutPrice(id){
            // 1. 我们要避免修改props中的数据！不能直接修改它
            // this.price = this.price - 1
            // this.price -= 1


            // 如果子组件想要修改父组件中的数据
            // 通知父组件，让父组件自己去修改自己的数据

            // this.$emit('自定义一个事件名', 参数1, 参数2)
            // 1. 第一个参数，自定义事件名，这个事件会在父组件中被监听
            // 2. 后面的参数，是要传给父组件的参数
            this.$emit('cut', 10, id)
        }
    }
}
</script>
<style>
.goods{
    margin: 50px auto;
}
</style>